<template>
  <div>
    <div>
      <el-button type="primary" @click="add">
        <i class="el-icon-plus"></i> 添加模板
      </el-button>
    </div>
    <hr/>
    <el-table :data="tableData" v-loading="loading" stripe>
      <el-table-column prop="goodsTemplateName" label="模板名称"></el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="action" top="8vh" width="40%" :append-to-body="true" :visible.sync="dialogFormVisible">
      <edit-form ref="formItem" :formItem="form"></edit-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="submitForm" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import http from '@/services/xhr';
  import apiSetting from '@/services/api';
  import editForm from '@/pages/template/edit';

  export default {
    name: 'index',
    data() {
      return {
        tableData: [],
        loading: true,
        action: '',
        dialogFormVisible: false,
        form: {}
      };
    },
    components: {
      editForm
    },
    mounted() {
      let data = {
        goodsTemplateQueryVo: {
          shopId: 2332323,
          platformId: 2332323
        }
      };

      http(apiSetting.getTemplateList, data).then(res => {
        this.tableData = res.data.data.goodsTemplateListVo;
        this.loading = false;
      });
    },
    methods: {
      handleEdit(row) {
        this.action = '编辑';
        this.form = JSON.parse(JSON.stringify(row));
        this.dialogFormVisible = true;
      },
      handleDelete(row) {
        // let data = {
        //   goodsTemplateId: row.goodsTemplateId
        // };
        this.$confirm('是否删除此模板?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          let len = '';
          this.tableData.forEach((element, index) => {
            if (element.goodsTemplateId === row.goodsTemplateId) {
              len = index;
            }
          });
          this.tableData.splice(len, 1);
          this.$message({
            type: 'success',
            message: '已删除!'
          });
        }).catch(() => {});
      },
      submitForm() {
        this.$refs.formItem.$refs.templateForm.validate(valid => {
          if (this.$refs.formItem.form.goodsTimes.length === 0) {
            this.$message({
              type: 'error',
              message: '请先设置场次模板'
            });
            valid = false;
          }
          if (valid) {
            let data = {
              goodsTemplateVo: JSON.parse(JSON.stringify(this.$refs.formItem.form))
            };

            // let data = JSON.parse(JSON.stringify(this.$refs.formItem.form));
            if (this.action === '添加') {
              delete data.goodsTemplateVo.goodsTemplateId;
              http(apiSetting.addTemplate, data).then(res => {
                data.goodsTemplateId =
                  res.data.data.goodsTemplateDto.goodsTemplateId;
                this.tableData.push(data);
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: this.action + '成功!'
                });
                this.dialogFormVisible = false;
              });
            } else {
              http(apiSetting.editTemplate, data).then(res => {
                let len = '';
                this.tableData.forEach((element, index) => {
                  if (element.goodsTemplateId === data.goodsTemplateId) {
                    len = index;
                  }
                });
                this.tableData.splice(len, 1, data);
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: this.action + '成功!'
                });
                this.dialogFormVisible = false;
              });
            }
          }
        });
      },
      add() {
        this.action = '添加';
        this.form = {};
        this.dialogFormVisible = true;
      }
    }
  };
</script>

